<template>
    <div>
        <!-- 内容音乐 -->
        <div class="content">
            <!-- 歌曲图片 -->
            <div class="songImg" @click="imgClick" ref="songImg">
                <img :src="img" alt="">
            </div>
            <!-- 歌词 -->
            <div class="lyric" ref="lyric" @click="lyricClick">
                <div v-for="item in songLyric" :key="item">
                    <span
                        :class="(item.time <= Math.floor(songCurrentTime) && Math.floor(songCurrentTime) < item.overTime ? 'gaoLiang' : '')">{{
                                item.lyc
                        }}</span>
                </div>
            </div>
        </div>
        <!-- 进度条 -->
        <div class=" progress">
            <!-- 播放时间 -->
            <div class="starTime">{{ currentTime }}</div>
            <!-- 可视区进度条 -->
            <div class="songProgress">
                <input type="range" ref="range" min="0.00" :max="Math.trunc(songDuration / 1000)"
                    :value="Math.trunc(songCurrentTime)" step="0.01" @change="audioChange">
            </div>
            <!-- 歌曲时长 -->
            <div class="songTime">
                {{ songsDuration === '00:30' ? '试听30秒' : songsDuration }}
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from "dayjs";
export default {
    props: ['img', 'songCurrentTime', 'songDuration'],
    emits: ['rangeVal'],
    data() {
        return {
            songLyric: [],
            // 歌曲的进度时间 （获取到的是秒）
            currentTime: '00:00',
            // 歌曲的总时间 (获取到的是时间戳)
            songsDuration: '00:00',

        }
    },
    async mounted() {

        // 获取音乐的歌曲的总时间
        // 请求音乐的播放地址和歌曲时长
        const { data: { data: res } } = await this.$http.get('/song/url?id=' + this.$route.query.id)
        // 获取失败就返回主页面
        if (res[0].code !== 200) return this.$router.push('/home')

        // 获取歌曲的url信息
        this.songsDuration = dayjs(res[0].time).format('mm:ss')

        // 缓存中有分好的歌词就不再请求

        // 请求获取歌词
        let { data } = await this.$http.get('/lyric', {
            params: {
                id: this.$route.query.id,
            }
        })

        this.songLyric = data.lrc.lyric
        let arr = []
        // 分割歌词和歌词的播放时间
        this.songLyric.split(/[(\r\n)\r\n]+/).forEach(item => {
            // 分钟
            const min = item.slice(1, 3)
            // 秒钟
            const sec = item.slice(4, 6)
            // 毫秒
            let msec = item.slice(7, 10)
            // 歌词
            const lyc = item.split(']')
            // console.log(min, sec, msec);
            // console.log(lyc[1]);

            if (isNaN(Number(msec))) {
                msec = item.slice(7, 9)
            }

            const time = Number(min * 60) + Number(sec) + '.' + msec
            // console.log(Math.floor(time));
            arr.push({ time: Math.floor(time), lyc: lyc[1] })
        })
        // 为每句歌词加上结束时间（获取下一句歌词的使劲按）
        arr.forEach((item, index) => {
            // 判断是否是最后一句歌词
            if (index === arr.length - 1) return item.overTime = 0
            // 不是最后一句歌词则继续添加
            item.overTime = arr[index + 1].time
        })
        this.songLyric = arr

        sessionStorage.setItem(this.$route.query.id, JSON.stringify(this.songLyric))


    },
    watch: {
        songCurrentTime() {
            if (this.songCurrentTime === '00:00') return
            let mm = Math.floor(this.songCurrentTime / 60)
            mm = mm < 10 ? '0' + mm : mm
            let ss = Math.floor(this.songCurrentTime % 60)
            ss = ss < 10 ? '0' + ss : ss
            this.currentTime = mm + ':' + ss
            // 当前的秒数
            // 判断是否需要滚动歌词
            const span = document.querySelector('span.gaoLiang')
            // 没找到的不执行以下操作
            if (span === null) return
            const div = span.parentNode
            // 设定一个歌词的合适位置
            let h
            div.parentNode.offsetHeight === 150 ? h = 388 : h = 305
            // 大于该位置就设置滚动距离
            if (span.offsetTop >= h) {
                this.$refs.lyric.scrollTop = span.offsetTop - h
            }
        }
    },
    methods: {
        // 点击图片放大专辑
        imgClick() {
            const h1 = this.$refs.lyric.offsetHeight
            const h2 = this.$refs.songImg.offsetHeight
            this.$refs.songImg.style.display = "none"
            this.$refs.lyric.style.height = h1 + h2 + 50 + 'px'
        },
        // 点击歌词恢复原样
        lyricClick() {
            this.$refs.songImg.style.display = "block"
            const h1 = this.$refs.lyric.offsetHeight
            const h2 = this.$refs.songImg.offsetHeight
            this.$refs.lyric.style.height = h1 - h2 - 50 + 'px'
        },
        // 进度条变化 被拖动
        audioChange() {

            this.$emit('rangeVal', this.$refs.range.value)
        },

    },

}
</script>

<style lang="scss" scoped>
.content {

    .songImg {
        margin: .6rem auto;
        width: 200px;
        height: 200px;

        img {
            width: 100%;
            border-radius: 35%;
        }
    }

    .lyric {
        display: flex;
        flex-direction: column;
        margin: 60px auto 0;
        width: 80%;
        height: 150px;
        text-align: center;
        // 生效歌词的换行符
        white-space: break-spaces;
        font-size: 14px;
        overflow: scroll;


        div {
            margin-bottom: 10px;

            .gaoLiang {
                color: orange;

            }
        }
    }


}

.progress {
    margin: 30px 0;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    align-items: center;

    .starTime {
        margin-right: 10px;
    }

    .songProgress {
        width: 60%;

        input {
            width: 100%;
        }
    }

    .songTime {
        margin-left: 10px;
    }
}
</style>